import React from 'react';
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    SafeAreaView,
    ScrollView,
    Alert,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { wp, hp, sp } from '../utils/layout';
import axios from 'axios';

const ActivateScreen = () => {
    const navigation = useNavigation();

    const handlePay = async () => {
        try {
            // 更新为正确的IP地址
            const serverIP = '172.20.10.6'; // 您的服务器IP
            
            console.log('正在请求支付接口...');
            const res = await axios.post(`http://172.20.10.6:3000/alipaySdk`, {
                out_trade_no: Date.now().toString(),
                subject: "AI医疗健康",
                total_amount: 299
            });
            
            console.log('支付接口响应状态:', res.status);
            
            if (res.data) {
                console.log('获取到支付表单');
                // 导航到WebView页面，加载支付宝返回的表单
                
                navigation.navigate('AlipayWebView', { html: res.data });
            } else {
                Alert.alert('提示', '获取支付信息失败，请稍后再试');
            }
        } catch (error) {
            console.error('支付请求错误:', error);
            Alert.alert(
                '连接服务失败', 
                '请确保后端服务已启动，并检查网络连接\n\n' +
                '详细错误: ' + (error.message || '未知错误')
            );
        }
    };

    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.header}>
                <TouchableOpacity
                    onPress={() => navigation.goBack()}
                    style={styles.backButton}
                >
                    <Icon name="arrow-back" size={24} color="#333" />
                </TouchableOpacity>
                <Text style={styles.headerTitle}>立即开通</Text>
            </View>

            <ScrollView style={styles.content}>
                <View style={styles.card}>
                    <Text style={styles.cardTitle}>会员特权</Text>
                    <View style={styles.featureItem}>
                        <Icon name="check-circle" size={20} color="#007AFF" />
                        <Text style={styles.featureText}>无限次健康咨询</Text>
                    </View>
                    <View style={styles.featureItem}>
                        <Icon name="check-circle" size={20} color="#007AFF" />
                        <Text style={styles.featureText}>专业医生一对一服务</Text>
                    </View>
                    <View style={styles.featureItem}>
                        <Icon name="check-circle" size={20} color="#007AFF" />
                        <Text style={styles.featureText}>24小时在线问诊</Text>
                    </View>
                </View>

                <View style={styles.priceSection}>
                    <Text style={styles.priceTitle}>选择套餐</Text>
                    <View style={styles.priceCard}>
                        <Text style={styles.price}>¥299</Text>
                        <Text style={styles.priceDesc}>/年</Text>
                    </View>
                </View>

                <TouchableOpacity style={styles.activateButton} onPress={handlePay}>
                    <Text style={styles.activateButtonText}>立即开通</Text>
                </TouchableOpacity>
            </ScrollView>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5',
    },
    header: {
        height: hp(60),
        backgroundColor: '#fff',
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: wp(20),
        borderBottomWidth: 1,
        borderBottomColor: '#eee',
    },
    backButton: {
        padding: wp(10),
    },
    headerTitle: {
        fontSize: sp(18),
        fontWeight: '600',
        marginLeft: wp(10),
    },
    content: {
        flex: 1,
        padding: wp(20),
    },
    card: {
        backgroundColor: '#fff',
        borderRadius: 10,
        padding: wp(20),
        marginBottom: hp(20),
    },
    cardTitle: {
        fontSize: sp(18),
        fontWeight: '600',
        marginBottom: hp(15),
    },
    featureItem: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: hp(10),
    },
    featureText: {
        fontSize: sp(16),
        marginLeft: wp(10),
        color: '#333',
    },
    priceSection: {
        backgroundColor: '#fff',
        borderRadius: 10,
        padding: wp(20),
        marginBottom: hp(20),
    },
    priceTitle: {
        fontSize: sp(18),
        fontWeight: '600',
        marginBottom: hp(15),
    },
    priceCard: {
        flexDirection: 'row',
        alignItems: 'baseline',
        justifyContent: 'center',
        padding: wp(20),
    },
    price: {
        fontSize: sp(36),
        fontWeight: 'bold',
        color: '#007AFF',
    },
    priceDesc: {
        fontSize: sp(16),
        color: '#666',
        marginLeft: wp(5),
    },
    activateButton: {
        backgroundColor: '#007AFF',
        borderRadius: 25,
        padding: wp(15),
        alignItems: 'center',
        marginTop: hp(20),
    },
    activateButtonText: {
        color: '#fff',
        fontSize: sp(18),
        fontWeight: '600',
    },
});

export default ActivateScreen; 



